{% load staticfiles %}
{% load myfilter %}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="A fully featured admin theme which can be used to build CRM, CMS, etc.">
    <meta name="author" content="WanFeng">

    <!-- App favicon -->
    <link rel="shortcut icon" href="{% static '' %}zircos/assets/images/favicon.ico">
    <!-- App title -->
    <title>用户中心 - WanFeng</title>

    <!-- date range picker -->
    <link href="{% static '' %}zircos/plugins/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet">

    <!-- DataTables -->
    <link href="{% static '' %}zircos/plugins/datatables/jquery.dataTables.min.css" rel="stylesheet" type="text/css"/>

    <!-- Sweet Alert -->
    <link href="{% static '' %}zircos/plugins/bootstrap-sweetalert/sweet-alert.css" rel="stylesheet" type="text/css">

    <!-- App css -->
    <link href="{% static '' %}zircos/assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="{% static '' %}zircos/assets/css/core.css" rel="stylesheet" type="text/css" />
    <link href="{% static '' %}zircos/assets/css/components.css" rel="stylesheet" type="text/css" />
    <link href="{% static '' %}zircos/assets/css/icons.css" rel="stylesheet" type="text/css" />
    <link href="{% static '' %}zircos/assets/css/pages.css" rel="stylesheet" type="text/css" />
    <link href="{% static '' %}zircos/assets/css/menu.css" rel="stylesheet" type="text/css" />
    <link href="{% static '' %}zircos/assets/css/responsive.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="{% static '' %}zircos/plugins/switchery/switchery.min.css">

    <!-- HTML5 Shiv and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <script src="{% static '' %}zircos/assets/js/modernizr.min.js"></script>

</head>


<body class="widescreen fixed-left-void">

<!-- Begin page -->
<div id="wrapper" class="enlarged forced">

<!-- Top Bar Start -->
{% include 'zircos/block/topbar.html' %}
<!-- Top Bar End -->


<!-- ========== Left Sidebar Start ========== -->
<!-- Left Sidebar End -->



<!-- ============================================================== -->
<!-- Start right Content here -->
<!-- ============================================================== -->
<div class="content-page">
<!-- Start content -->
<div class="content">
<div class="container">


<!-- ========== Common Modal Start ========== -->
{% include 'zircos/block/modal.html' %}
<!-- Common Modal End -->



<div class="row">
    <div class="col-xs-12">
        <div class="page-title-box">
            <h4 class="page-title">个人中心 </h4>
            <ol class="breadcrumb p-0 m-0">
                <li>
                    <a href="#">WanFeng</a>
                </li>
                <li>
                    <a href="#">Dashboard </a>
                </li>
                <li class="active">
                    个人中心
                </li>
            </ol>
            <div class="clearfix"></div>
        </div>
    </div>
</div>
<!-- end row -->


<div class="row">

    <div class="col-lg-3 col-md-6">
        <div class="card-box widget-box-two widget-two-primary">
            <i class="mdi mdi-chart-areaspline widget-two-icon"></i>
            <div class="wigdet-two-content">
                <p class="m-0 text-uppercase font-600 font-secondary text-overflow" title="Statistics">关键词</p>
                <h2><span data-plugin="counterup">{{ wordList.count }}</span> <small><i class="mdi mdi-arrow-up text-success"></i></small></h2>
                <p class="text-muted m-0"><b>Last:</b> 30.4k</p>
            </div>
        </div>
    </div><!-- end col -->

    <div class="col-lg-3 col-md-6">
        <div class="card-box widget-box-two widget-two-warning">
            <i class="mdi mdi-layers widget-two-icon"></i>
            <div class="wigdet-two-content">
                <p class="m-0 text-uppercase font-600 font-secondary text-overflow" title="User This Month">产品</p>
                <h2><span data-plugin="counterup">{{ productNum }} </span> <small><i class="mdi mdi-arrow-up text-success"></i></small></h2>
                <p class="text-muted m-0"><b>Last:</b> 40.33k</p>
            </div>
        </div>
    </div><!-- end col -->

    <div class="col-lg-3 col-md-6">
        <div class="card-box widget-box-two widget-two-danger">
            <i class="mdi mdi-access-point-network widget-two-icon"></i>
            <div class="wigdet-two-content">
                <p class="m-0 text-uppercase font-600 font-secondary text-overflow" title="Statistics">店铺</p>
                <h2><span data-plugin="counterup">{{ storeNum }}</span> <small><i class="mdi mdi-arrow-up text-success"></i></small></h2>
                <p class="text-muted m-0"><b>Last:</b> 30.4k</p>
            </div>
        </div>
    </div><!-- end col -->

    <div class="col-lg-3 col-md-6">
        <div class="card-box widget-box-two widget-two-success">
            <i class="mdi mdi-account-convert widget-two-icon"></i>
            <div class="wigdet-two-content">
                <p class="m-0 text-uppercase font-600 font-secondary text-overflow" title="User Today">店铺</p>
                <h2><span data-plugin="counterup">{{ storeNum }} </span> <small><i class="mdi mdi-arrow-down text-danger"></i></small></h2>
                <p class="text-muted m-0"><b>Last:</b> 1250</p>
            </div>
        </div>
    </div><!-- end col -->

</div>
<!-- end row -->


<div class="row">
    <div class="col-lg-6 col-md-6">
        <div class="card-box">
            <h4 class="header-title m-t-0 m-b-30">平台统计</h4>
            <div id="platform-stats" style="height: 365px;" class="flot-chart"></div>
        </div>
    </div>
     <!-- end col -->

    <div class="col-md-6">
        <div class="card-box">
            <!--<h4 class="header-title m-t-0 m-b-20">热销产品</h4>-->
            <ul class="nav nav-tabs">
                <li class="active">
                    <a href="#hotProduct" data-toggle="tab" aria-expanded="true">
                        <span class="visible-xs"><i class="fa fa-home"></i></span>
                        <span class="hidden-xs">最近热卖</span>
                    </a>
                </li>
                <li class="">
                    <a href="#lastUpdate" data-toggle="tab" aria-expanded="false">
                        <span class="visible-xs"><i class="fa fa-user"></i></span>
                        <span class="hidden-xs">最新采集</span>
                    </a>
                </li>
                <li class="">
                    <a href="#newProduct" data-toggle="tab" aria-expanded="false">
                        <span class="visible-xs"><i class="fa fa-user"></i></span>
                        <span class="hidden-xs">新品推荐</span>
                    </a>
                </li>
                <li class="">
                    <a href="#priceChange" data-toggle="tab" aria-expanded="false">
                        <span class="visible-xs"><i class="fa fa-envelope-o"></i></span>
                        <span class="hidden-xs">价格变动</span>
                    </a>
                </li>
            </ul>
            <div class="tab-content">
            <div class="tab-pane active" id="hotProduct">
                {% for product in top_products %}
                <div class="media latest-post-item">
                    <div class="media-left">
                        <a href="{% url 'product_info' product.product_id %}" target="_blank"> <img class="media-object" alt="{{ product.product_title }}" src="{{ product.thumb }}" style="width: 100px; height: 66px;"> </a>
                    </div>
                    <div class="media-body">
                        <h5 class="media-heading" style="font-size: 12px;font-weight: normal;"><a href="{% url 'product_info' product.product_id %}" target="_blank">{{ product.product_title }}</a> </h5>
                        <p class="font-13 text-muted">
                            周订单:<code>{{ product.weekly_orders }}</code> | 7天增长率:<code>{% if product.seven_growth_rates %}{% widthratio product.seven_growth_rates 1 100 %}%{% else %}-{% endif %}</code> | 总销量:<code>{{ product.orders }}</code> | 评论数:<code>{{ product.votes }}</code>
                        </p>
                    </div>
                </div>
                {% endfor %}
                <div class="text-center">
                    <a href="{% url 'favorite' %}" class="btn btn-sm btn-teal waves-effect waves-light">查看更多</a>
                </div>
            </div>
            <div class="tab-pane" id="lastUpdate">
                {% for product in last_upadte_products %}
                <div class="media latest-post-item">
                    <div class="media-left">
                        <a href="{% url 'product_info' product.product_id %}" target="_blank"> <img class="media-object" alt="{{ product.product_title }}" src="{{ product.thumb }}" style="width: 100px; height: 66px;"> </a>
                    </div>
                    <div class="media-body">
                        <h5 class="media-heading" style="font-size: 12px;font-weight: normal;"><a href="{% url 'product_info' product.product_id %}" target="_blank">{{ product.product_title }}</a> </h5>
                        <p class="font-13 text-muted">
                            周订单:<code>{{ product.weekly_orders }}</code> | 7天增长率:<code>{% if product.seven_growth_rates %}{% widthratio product.seven_growth_rates 1 100 %}%{% else %}-{% endif %}</code> | 总销量:<code>{{ product.orders }}</code> | 评论数:<code>{{ product.votes }}</code>
                        </p>
                    </div>
                </div>
                {% endfor %}

                <div class="text-center">
                    <a href="{% url 'products' %}" class="btn btn-sm btn-teal waves-effect waves-light">查看更多</a>
                </div>

            </div>
            <div class="tab-pane" id="newProduct">
                {% for product in new_products %}
                <div class="media latest-post-item">
                    <div class="media-left">
                        <a href="{% url 'product_info' product.product_id %}" target="_blank"> <img class="media-object" alt="{{ product.product_title }}" src="{{ product.thumb }}" style="width: 100px; height: 66px;"> </a>
                    </div>
                    <div class="media-body">
                        <h5 class="media-heading" style="font-size: 12px;font-weight: normal;"><a href="{% url 'product_info' product.product_id %}" target="_blank">{{ product.product_title }}</a> </h5>
                        <p class="font-13 text-muted">
                            周订单:<code>{{ product.weekly_orders }}</code> | 7天增长率:<code>{% if product.seven_growth_rates %}{% widthratio product.seven_growth_rates 1 100 %}%{% else %}-{% endif %}</code> | 总销量:<code>{{ product.orders }}</code> | 评论数:<code>{{ product.votes }}</code>
                        </p>
                    </div>
                </div>
                {% endfor %}
            </div>
            <div class="tab-pane" id="priceChange">
                <p>暂无数据！</p>
            </div>

            </div>



        </div> <!-- end card-box -->
    </div> <!-- end col -->
</div>

<!-- end row -->


<div class="row">
    <div class="col-md-12">
        <div class="card-box">
            <h4 class="header-title m-t-0 m-b-30">我的采集任务</h4>

            <div class="table-responsive">
                <table id="datatable" class="table table table-hover m-0">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>关键词</th>
                        <th>类目</th>
                        <th>热度</th>
                        <th>产品数量</th>
                        <th>更新时间</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for word in wordList %}
                              <tr>
                                <td>{{ word.id }}</td>
                                <td><a href="{% url 'products' %}?word={{ word.id }}">{{ word.keyword }}<br />{% if word.keyword_chinese %}{{ word.keyword_chinese }}{% else %}{{ word.id|TranslateSearchWords }}{% endif %}</a></td>
                                <td>{% if not word.category %}<i class="glyphicon glyphicon-pencil" title="纠错" onclick="edit('{{ word.id }}','{{ word.keyword }}')" data-toggle="modal" data-target="#editModal"></i>{% else %}<a href="#">{{ word.category }}</a>{% endif %}</td>
                                <td class="res-{{ word.id }}">{{ word.results }}</td>
                                <td class="num-{{ word.id }}">{{ word.product_num }}</td>
                                <td class="time-{{ word.id }}">{{ word.update_time|date:'Y/m/d H:i:s' }}</td>
                                <td>{% if word.status %}<button id="sta-{{ word.id }}" class="btn btn-icon btn-success m-b-4"><i class="glyphicon glyphicon-pause"></i></button>{% else %}<button id="sta-{{ word.id }}" onclick="caiji('{{ word.id }}')" class="btn btn-icon btn-inverse m-b-4"><i class="glyphicon glyphicon-play"></i></button>{% endif %} {% if request.user in word.user.all  %}<button class="btn btn-icon btn-purple m-b-4"> <i class="fa fa-heart"></i></button>{% else %}<button class="btn btn-icon btn-purple m-b-4" id="fav-{{ word.id }}" onclick="addfav({{ word.id }})"><i class="fa fa-heart-o"  title="收藏关键词"></i></button>{% endif %}</td>
                              </tr>
                    {% endfor %}
                    </tbody>
                </table>

            </div> <!-- table-responsive -->
        </div> <!-- end card -->
    </div>
    <!-- end col -->

</div>
<!-- end row -->


</div> <!-- container -->

</div> <!-- content -->



<!-- Footer Copyright Start -->
{% include 'zircos/block/footer_copyright.html' %}
<!-- /Footer Copyright End -->



</div>


<div id="editModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
            <div class="modal-dialog">
                <div class="modal-content p-0 b-0">
                    <div class="panel panel-color panel-info">
                        <div class="panel-heading">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                            <h3 class="panel-title" id="myEditModal">修改［<i></i>（<span></span>）］的类目</h3>
                        </div>
                        <div class="panel-body">
                            选择类目：
                            <select name="statusData" id="statusData">
                                {% for category in category_list %}
                                <option value="{{ category.id }}">{{ category.name }}</option>
                                {% endfor %}
                            </select>
                            <button class="btn btn-sm btn-primary" style="margin-left: 60px;" id="saveBtn">保 存</button>
                        </div>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->



<!-- ============================================================== -->
<!-- End Right content here -->
<!-- ============================================================== -->


<!-- Right Sidebar -->
{% include 'zircos/block/right-bar.html' %}
<!-- /Right-bar -->


</div>
<!-- END wrapper -->



<script>
    var resizefunc = [];
</script>

<!-- jQuery  -->
<script src="{% static '' %}zircos/assets/js/jquery.min.js"></script>
<script src="{% static '' %}zircos/assets/js/bootstrap.min.js"></script>
<script src="{% static '' %}zircos/assets/js/detect.js"></script>
<script src="{% static '' %}zircos/assets/js/fastclick.js"></script>
<script src="{% static '' %}zircos/assets/js/jquery.blockUI.js"></script>
<script src="{% static '' %}zircos/assets/js/waves.js"></script>
<script src="{% static '' %}zircos/assets/js/jquery.slimscroll.js"></script>
<script src="{% static '' %}zircos/assets/js/jquery.scrollTo.min.js"></script>
<script src="{% static '' %}zircos/plugins/switchery/switchery.min.js"></script>

<!-- Counter js  -->
<script src="{% static '' %}zircos/plugins/waypoints/jquery.waypoints.min.js"></script>
<script src="{% static '' %}zircos/plugins/counterup/jquery.counterup.min.js"></script>


<script src="{% static '' %}zircos/plugins/moment/moment.js"></script>
<script src="{% static '' %}zircos/plugins/bootstrap-daterangepicker/daterangepicker.js"></script>



<!-- Echarts init -->
<script type="text/javascript" src="{% static '' %}lib/echarts.min.js"></script>


<!-- DataTables init -->
<script src="{% static '' %}zircos/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="{% static '' %}zircos/plugins/datatables/dataTables.bootstrap.js"></script>

<!-- Sweet-Alert  -->
<script src="{% static '' %}zircos/plugins/bootstrap-sweetalert/sweet-alert.min.js"></script>
<script src="{% static '' %}zircos/assets/pages/jquery.sweet-alert.init.js"></script>

<!-- App js -->
<script src="{% static '' %}zircos/assets/js/jquery.core.js"></script>
<script src="{% static '' %}zircos/assets/js/jquery.app.js"></script>

<script>

    $('#datatable').dataTable();

    $('#reportrange span').html(moment().subtract(29, 'days').format('MMMM D, YYYY') + ' - ' + moment().format('MMMM D, YYYY'));
    $('#reportrange').daterangepicker({
        format: 'MM/DD/YYYY',
        startDate: moment().subtract(29, 'days'),
        endDate: moment(),
        minDate: '01/01/2012',
        maxDate: '12/31/2016',
        dateLimit: {
            days: 60
        },
        showDropdowns: true,
        showWeekNumbers: true,
        timePicker: false,
        timePickerIncrement: 1,
        timePicker12Hour: true,
        ranges: {
            'Today': [moment(), moment()],
            'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
            'Last 7 Days': [moment().subtract(6, 'days'), moment()],
            'Last 30 Days': [moment().subtract(29, 'days'), moment()],
            'This Month': [moment().startOf('month'), moment().endOf('month')],
            'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        },
        opens: 'left',
        drops: 'down',
        buttonClasses: ['btn', 'btn-sm'],
        applyClass: 'btn-success',
        cancelClass: 'btn-default',
        separator: ' to ',
        locale: {
            applyLabel: 'Submit',
            cancelLabel: 'Cancel',
            fromLabel: 'From',
            toLabel: 'To',
            customRangeLabel: 'Custom',
            daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
            monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
            firstDay: 1
        }
    }, function (start, end, label) {
        console.log(start.toISOString(), end.toISOString(), label);
        $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
    });



    function caiji(wordId){
          swal({
            title: "采集任务即将执行!",
            text: "3秒后开始采集.",
            timer: 3000,
            showConfirmButton: false
        });
          $.post("{% url 'aliexpress:search_product_list' %}",{wordId:wordId},function(result){
              //$("span").html(result);
              if(result.error==1){
                 swal("失败", result.msg, "error");
                  return false;
              }else{
                  $(".res-"+wordId).html(result.results);
                  $(".num-"+wordId).html(result.product_num);
                  $(".time-"+wordId).html(result.update_time);
                  var s = $("#sta-"+wordId)
                  s.removeClass('btn-inverse');
                  s.addClass('btn-success');
                  s.html('<i class="glyphicon glyphicon-pause"></i>');
                  s.removeAttr('onclick');
                  swal("采集完毕!");
              }
          });
      }


    function addfav(id){
          //location.href = "{% url 'aliexpress:monitor_add' %}?id="+id
          //location.href = "{% url 'favorite_add' %}?id="+id;
            $.get("{% url 'favorite_add' %}?wordId="+id, function(result){
                if(result=='1'){
                    $('#fav-'+id).html('<i class="fa fa-heart"></i>');
                    $('#fav-'+id).removeAttr('onclick');
                    swal({
                        title: "操作成功!",
                        text: "成功收藏关键词［"+id+"］!",
                        timer: 1000,
                        showConfirmButton: true
                    });
                }else{
                    swal("收藏失败", "error");
                }
              });
      }


      function edit(id,word){
                $('#myEditModal span').html(id);
                $('#myEditModal i').html(word);

            }

    $('#saveBtn').click(function(){
                var cid = $('#statusData').val();
                var wid = $('#myEditModal span').html();
                //alert(track_number);

                location.href = "{% url 'editWordsCategory' %}?wid="+wid+"&cid="+cid;


            });


</script>

<script>
    //统计平台产品
    var dom = document.getElementById("platform-stats");
    var myChart = echarts.init(dom);
    var app = {};
    option = {
        title : {
            //text: '某站点用户访问来源',
            subtext: '纯属虚构',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['速卖通','eBay','Amazon','Wish']
        },
        series : [
            {
                name: '产品数量',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:[
                    {value:335, name:'速卖通'},
                    {value:310, name:'eBay'},
                    {value:234, name:'Amazon'},
                    {value:135, name:'Wish'}
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };


    if (option && typeof option === "object") {
    myChart.setOption(option, true);
}
</script>

</body>
</html>